<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
    <title>壹脉智能CRM</title>
    <!-- Bootstrap Core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="../assets/node_modules/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet"> -->

    <!-- <link href="../assets/node_modules/sweetalert/sweetalert.css" rel="stylesheet" type="text/css"> -->


    <!-- This page CSS -->
    <!-- chartist CSS -->
    <!-- <link href="../assets/node_modules/morrisjs/morris.css" rel="stylesheet"> -->
    <!--c3 CSS -->
    <!-- <link href="../assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> -->
    <!--Toaster Popup message CSS -->
    <!-- <link href="../assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> -->
    <!-- Custom CSS -->
    <link href="css/style.min.css" rel="stylesheet">
    <!-- Dashboard 1 Page CSS -->
    <!--<link href="css/pages/dashboard1.css" rel="stylesheet">-->
    <!-- You can change the theme colors from here -->
    <link href="css/colors/default.css" id="theme" rel="stylesheet">
    <link rel="stylesheet" href="css/diy.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
<div class="preloader">
    <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
    </div>
</div>
<div id="main-wrapper">
    <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <div class="navbar-header">
                <a class="navbar-brand" href="../index.html">
                    <b>
                        <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
                        <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
                    </b>
                    <span>
                        <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
                    </span>
                </a>
            </div>
            <div class="navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                    <li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                </ul>
                <user-head></user-head>
            </div>
        </nav>
    </header>
    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <company-position></company-position>
            <nav class="sidebar-nav p-0">
                <c-slider current="7"></c-slider>
            </nav>
        </div>
    </aside>
    <div class="page-wrapper">

        <div class="container-fluid">

            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3 class="text-themecolor">小程序管理</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                        <li class="breadcrumb-item active">小程序管理</li>
                    </ol>
                </div>
            </div>

            <!--form-->
            <div class="row bg-white">
                <ul class="nav w100p nav-tabs customtab position-relative" role="tablist">
                    <li class="nav-item" v-for="(v,k) in appTypes" :key="k">
                        <a class="nav-link curpointer" data-toggle="tab" role="tab"
                           :class="v.id == navs_id ? 'active' : '' "
                           @click="changeNav(v.id)">
                            <span class="hidden-sm-up">
                                <i class="ti-home"></i>
                            </span>
                            <span class="hidden-xs-down">{{v.title}}</span>
                        </a>
                    </li>
                </ul>
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="#" >
                                <div class="form-body col-md-12" v-if="navs_id==1 || navs_id==2">
                                    <div class="row" v-if="navs_id==1">
                                        <table class="align-cen-table textc table table-hover table-bordered bgf6f9fa fixed-table text-ellipsis"
                                               v-if="accountMap[navs_id] && accountMap[navs_id].state == 1">
                                            <thead>
                                            <tr>
                                                <th>小程序名称</th>
                                                <th>APPID</th>
                                                <th>授权时间</th>
                                            </tr>
                                            </thead>
                                            <tbody class="bgfff">
                                            <tr>
                                                <td>{{userApp.appName}}</td>
                                                <td>{{userApp.appId}}</td>
                                                <td>{{userApp.createTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <template v-else>
                                            <div class="col-md-12">
                                                <div class="form-group ">
                                                    <label class="control-label required">
                                                        App名称
                                                    </label>
                                                    <div class="col-md-6 p-0">
                                                        <input type="text"
                                                               class="form-control phgray"
                                                               v-model="userApp.appName"
                                                               placeholder="请输入小程序名称">
                                                    </div>
                                                    <div class="m-t-5 c78" target="_blank">小程序的名称（请于微信小程序平台中的小程序名称保持一致，进入【设置】--【基本设置】--【小程序名称】查看）</div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group ">
                                                    <label class="control-label required">
                                                        AppId
                                                    </label>
                                                    <div class="col-md-6 p-0">
                                                        <input type="text"
                                                               class="form-control phgray"
                                                               v-model="userApp.appId"
                                                               placeholder="请输入小程序AppId">
                                                    </div>
                                                    <div class="m-t-5 c78">登录小程序后台（
                                                        <a href="https://mp.weixin.qq.com" target="_blank">mp.weixin.qq.com</a>
                                                        ）进入【设置】--【开发设置】--【开发设置AppID,wx开头18位字符】）</div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group ">
                                                    <label class="control-label required">
                                                        AppSecret
                                                    </label>
                                                    <div class="col-md-6 p-0">
                                                        <input type="text"
                                                               class="form-control phgray"
                                                               v-model="userApp.appSecret"
                                                               placeholder="请输入小程序AppSecret">
                                                    </div>
                                                    <div class="m-t-5 c78">登录小程序后台（
                                                        <a href="https://mp.weixin.qq.com" target="_blank">mp.weixin.qq.com</a>
                                                        ）进入【设置】--【开发设置】--【AppSecret（小程序密钥)】--生成密钥（32位字符）
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                    <div class="row" v-if="navs_id==2">
                                        <table class="align-cen-table textc table table-hover table-bordered bgf6f9fa fixed-table text-ellipsis"
                                               v-if="accountMap[navs_id] && accountMap[navs_id].state == 1">
                                            <thead>
                                            <tr>
                                                <th>小程序名称</th>
                                                <th>APPID</th>
                                                <th>授权时间</th>
                                            </tr>
                                            </thead>
                                            <tbody class="bgfff">
                                            <tr>
                                                <td>{{crmApp.appName}}</td>
                                                <td>{{crmApp.appId}}</td>
                                                <td>{{crmApp.createTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <template v-else>
                                            <div class="col-md-12">
                                                <div class="form-group ">
                                                    <label class="control-label required">
                                                        App名称
                                                    </label>
                                                    <div class="col-md-6 p-0">
                                                        <input type="text"
                                                               class="form-control phgray"
                                                               v-model="crmApp.appName"
                                                               placeholder="请输入小程序名称">
                                                    </div>
                                                    <div class="m-t-5 c78" target="_blank">小程序的名称（请于微信小程序平台中的小程序名称保持一致，进入【设置】--【基本设置】--【小程序名称】查看）</div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group ">
                                                    <label class="control-label required">
                                                        AppId
                                                    </label>
                                                    <div class="col-md-6 p-0">
                                                        <input type="text"
                                                               class="form-control phgray"
                                                               v-model="crmApp.appId"
                                                               placeholder="请输入小程序AppId">
                                                    </div>
                                                    <div class="m-t-5 c78">登录小程序后台（
                                                        <a href="https://mp.weixin.qq.com" target="_blank">mp.weixin.qq.com</a>
                                                        ）进入【设置】--【开发设置】--【开发设置AppID,wx开头18位字符】）</div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group ">
                                                    <label class="control-label required">
                                                        AppSecret
                                                    </label>
                                                    <div class="col-md-6 p-0">
                                                        <input type="text"
                                                               class="form-control phgray"
                                                               v-model="crmApp.appSecret"
                                                               placeholder="请输入小程序AppSecret">
                                                    </div>
                                                    <div class="m-t-5 c78">登录小程序后台（
                                                        <a href="https://mp.weixin.qq.com" target="_blank">mp.weixin.qq.com</a>
                                                        ）进入【设置】--【开发设置】--【AppSecret（小程序密钥)】--生成密钥（32位字符）
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                    <div class="d-flex" v-if="!(accountMap[navs_id] && accountMap[navs_id].state == 1)">
                                        <span class="w85 textc btn-success cfff bradius4 curpointer lh40 dis-inline-block"
                                              :class="{disabled: loading}"
                                              @click="empower">授权</span>
                                    </div>

                                    <div class="m-t-20" v-if="navs_id==2 && accountMap[navs_id] && accountMap[navs_id].state == 1">
                                        <div class="col-md-12">
                                            <div>请前往壹脉智能名片 【个人中心】-- 【用户ID】</div>
                                            <div class="form-group m-t-5">
                                                <label class="control-label required">
                                                    用户ID
                                                </label>
                                                <div class="col-md-6 p-0">
                                                    <input type="text"
                                                           class="form-control phgray"
                                                           v-model="userId"
                                                           placeholder="请输入小程序名称">
                                                </div>
                                                <div class="m-t-5 c78 text-danger">请确认所有客户都是共享客户才可进行转移</div>
                                                <div class="m-t-5 c78">目前只支持，转移 企业信息，产品信息，官网，共享客户这4种数据。不是支持员工转移。 员工只能重新加入新的小程序。</div>
                                            </div>
                                            <div class="d-flex">
                                                <span class="w85 textc btn-success cfff bradius4 curpointer lh40 dis-inline-block" @click="companyTransfer">
                                                    确认转移
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-body col-md-6" v-if="navs_id==4">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group ">
                                                <label class="control-label required">
                                                    商户ID
                                                </label>
                                                <input type="text"
                                                       class="form-control phgray"
                                                       v-model="payInfo.merchantId"
                                                       placeholder="请输入商户ID">
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group ">
                                                <label class="control-label required">
                                                    商户秘钥
                                                </label>
                                                <input type="text"
                                                       class="form-control phgray"
                                                       v-model="payInfo.key"
                                                       placeholder="请输入商户秘钥">
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group ">
                                                <label class="control-label required">
                                                    支付证书
                                                </label>
                                                <div>
                                                    <label>
                                                        <span class="w85 textc btn-info cfff bradius4 curpointer lh30 dis-inline-block">点击上传</span>
                                                        {{fileName}}
                                                        <input type="file" class="hide" ref="file" @change="addFile">
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="d-flex">
                                            <span class="w85 textc btn-success cfff bradius4 curpointer lh40 dis-inline-block"
                                                  :class="{disabled: payLoading}"
                                                  @click="submitPayInfo">提交</span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>


</div>
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap popper Core JavaScript -->
<!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
<script src="js/bootstrap.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<!-- <script src="js/perfect-scrollbar.jquery.min.js"></script> -->
<!--Wave Effects -->
<!-- <script src="js/waves.js"></script> -->
<!--Menu sidebar -->
<script src="js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--morris JavaScript -->
<!-- <script src="../assets/node_modules/raphael/raphael-min.js"></script>
<script src="../assets/node_modules/morrisjs/morris.min.js"></script> -->
<!--c3 JavaScript -->
<!--<script src="../assets/node_modules/d3/d3.min.js"></script>-->
<!--<script src="../assets/node_modules/c3-master/c3.min.js"></script>-->
<!-- Popup message jquery -->
<!-- <script src="../assets/node_modules/toast-master/js/jquery.toast.js"></script> -->

<!-- <script src="../assets/node_modules/sweetalert/sweetalert.min.js"></script>
<script src="../assets/node_modules/sweetalert/jquery.sweet-alert.custom.js"></script> -->

<!-- Chart JS -->
<!--<script src="js/dashboard1.js"></script>-->
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<!-- <script src="../assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> -->
<script src="js/layer/layer.js"></script>
<script src="js/vue.js"></script>
<script src="js/config.js"></script><script src="js/extend.js"></script>
<!--<script src="js/headers.js"></script>-->
<!--<script src="js/Aside.js"></script>-->

<script>
    $(function () {
        var vw = new Vue({
            el: '#main-wrapper',
            // components:{header},
            data: {
                userApp: {
                    appId: '',
                    appName: '',
                    appSecret: '',
                },
                crmApp: {
                    appId: '',
                    appName: '',
                    appSecret: '',
                },
                pcData: {

                },
                payInfo:{
                    merchantId: '',
                    key: '',
                    certData: '',
                },
                fileName: '',
                loading: false,
                appTypes:[
                    { id: '1', title: '用户端' },
                    { id: '2', title: 'crm端' },
                    // { id: '3', title: 'PC' },
                    { id: '4', title: '支付' },
                ],
                filedNameMap:{
                    appId: 'AppId',
                    appName: 'App名称',
                    appSecret: 'AppSecret',
                },
                idMap:{
                    1: 'userApp',
                    2: 'crmApp',
                    3: 'pcData',
                    4: 'payInfo',
                },
                payLoading: false,
                navs_id: '1',
                accountMap: {},
                userId: '',
            },
            mounted(){
                var param = $.formatParams(location.href);

                if (param.auth_code) {
                    this.navs_id = param.type || '1';
                    this.empowerCallback(param.auth_code);
                }else{
                    this.getAppListInfo();
                }

            },
            methods:{
                companyTransfer(){
                    if (!this.userId.trim()) {
                        layer.alert('请输入用户ID');
                        return;
                    }

                    layer.confirm('确定要将企业移交给该用户吗？', {
                        skin: 'confirm-class',
                        btn: ['取消', '确定'],
                    }, (idx)=>{
                        layer.close(idx);
                    },() =>{
                        $.cAjax('/crmPc/companyGoods/companyTransfer', {
                            data:{
                                userId: this.userId
                            }
                        }).then(res=>{
                            layer.alert('转移成功');
                            this.userId = '';
                        })
                    });
                },
                addFile(){
                  let fileElem = this.$refs.file;
                  let file = fileElem.files[0];
                  let _this = this;

                  if (!file)  return;

                  this.fileName = fileElem.value;

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e){
                        let base64Data = e.target.result;
                        base64Data = base64Data.substring(base64Data.indexOf(',')+1);
                        _this.payInfo.certData = base64Data;
                        fileElem.value = '';
                    };
                },
                submitPayInfo(){
                    $.cAjax('/crmPc/companyGoods/payment', {
                        data: this.payInfo,
                    }).then(res=>{
                        layer.alert('上传成功');
                    })
                },
                changeNav(id){
                    this.navs_id = id;
                },
                empowerCallback(code){
                    $.cAjax('/crmPc/component/componentCallBack', {
                        data:{
                            authCode: code,
                            appId: localStorage.getItem('appId'),
                        },
                    }).then(res=>{
                        this.getAppListInfo();
                        localStorage.removeItem('appId');
                    }).catch(()=>{
                        this.getAppListInfo();
                    })
                },
                empower(){
                    let param = JSON.parse(JSON.stringify(this[this.idMap[this.navs_id]]));
                    let requiedField = [ 'appId', 'appName', 'appSecret'];

                    for(let key of requiedField){
                        if (!param[key]) {
                            layer.alert(this.filedNameMap[key]+'不能为空');
                            return;
                        }
                    }

                    param.accountType = this.navs_id;

                    $.cAjax('/crmPc/component/componentloginpage', {
                        data: param,
                    }).then(data=>{
                        localStorage.setItem('appId', this[this.idMap[this.navs_id]].appId);
                        window.open(data);
                    })
                },
                getAppListInfo(){
                    $.cAjax('/crmPc/companyAccount/getCompanyAccountList', {
                        data:{
                            appId: true
                        },
                    }).then(res=>{
                        let tmp = {};

                        res && res.map(val => {
                            tmp[val.accountType] = val;
                            this[this.idMap[val.accountType]] = val;
                        });

                        this.accountMap = tmp;
                    });
                },
            },

        })
    })
</script>

</body>

</html>












